<template>
  <el-scrollbar height="760px">
    <div class="info_container">
      <el-card>
        <template #header>
          <div class="title_main">
            <span class="title"></span>
            <span class="note"> 设备基本信息</span>
          </div>
        </template>
        <div class="card_body">
          <div class="card_body1">
            <img
              src="@/assets/img/lixian.png"
              style="width: 100px; height: 100px"
            />
            <span
              style="
                font-weight: 400;
                color: #ed5f5c;
                font-size: 18px;
                margin-left: 15px;
              "
              >离线状态</span
            >
          </div>
          <div class="card_body2">
            <el-row style="font-size: 18px; color: #606266; font-weight: 400">
              <el-col :span="8">
                <div><span>设备序列号：</span><span>866117055041</span></div>
              </el-col>
              <el-col :span="8">
                <div><span>设备型号：</span><span>HA07X</span></div>
              </el-col>
              <el-col :span="8">
                <div><span>设备型号：</span><span>SOS紧急报警器-主</span></div>
              </el-col>
              <el-col
                :span="8"
                style="
                  margin-top: 30px;
                  display: flex;
                  align-items: center;
                  height: 44px;
                "
              >
                <div style="display: flex; align-items: center">
                  <span>设备电量：</span
                  ><span style="display: inline-block"
                    ><BatteryDisplay
                      :quantity="30"
                      :width="100"
                      :height="35"
                    ></BatteryDisplay
                  ></span>
                </div>
              </el-col>
              <el-col
                :span="8"
                style="margin-top: 30px; display: flex; align-items: center"
              >
                <div style="display: flex; display: flex; align-items: center">
                  <span>监测数据：</span>
                  <span>
                    <img
                      src="@/assets/img/gaojing.png"
                      style="width: 44px; margin-left: 10px"
                    />
                    <img
                      src="@/assets/img/jiankang.png"
                      style="width: 44px; margin-left: 10px"
                    />
                    <img
                      src="@/assets/img/jiankong.png"
                      style="width: 44px; margin-left: 10px"
                    />
                    <img
                      src="@/assets/img/shuimian.png"
                      style="width: 44px; margin-left: 10px"
                    />
                  </span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 15px">
        <template #header>
          <div class="title_main">
            <span class="title"></span>
            <span class="note"> 即时报警</span>
          </div>
        </template>
        <div style="display: flex; justify-content: start; flex-wrap: wrap">
          <div
            class="item dangers"
            style="cursor: pointer"
            @click="open = true"
          >
            <div>
              <img
                src="@/assets/img/sos.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>SOS告警：</span><span>紧急呼叫</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
            <div style="position: absolute; right: 10px; top: 5px">
              <img
                src="@/assets/img/liangdeng.png"
                style="width: 23px; height: 23px"
              />
            </div>
          </div>
          <div class="item" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/yangwu.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>烟雾：</span><span>正常</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
          </div>
          <div class="item" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/hongwai.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>红外：</span><span>无人</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
          </div>
          <div class="item" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/shuijin.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>水浸：</span><span>正常</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
          </div>
          <div class="item" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/ranqi.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>燃气：</span><span>正常</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
          </div>
          <div class="item" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/menci.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>门磁：</span><span>门关</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 15px">
        <template #header>
          <div class="title_main">
            <span class="title"></span>
            <span class="note">健康指标</span>
          </div>
        </template>
        <div
          style="display: flex; justify-content: start; flex-wrap: wrap"
          @click="open1 = true"
        >
          <div class="item dangers" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/shuosuo.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>收缩压：</span><span>145mmHG</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
            <div style="position: absolute; right: 10px; top: 5px">
              <img
                src="@/assets/img/liangdeng.png"
                style="width: 23px; height: 23px"
              />
            </div>
          </div>
          <div class="item" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/shuosuo.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>舒张压：</span><span>75mmHG</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
          </div>
          <div class="item" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/xinlv.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>心率：</span><span>80次/分钟</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
          </div>
          <div class="item" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/huxilv.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>呼吸率：</span><span>80次/分钟</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
          </div>
          <div class="item" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/xueyang.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>血氧：</span><span>97%</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
          </div>
          <div class="item" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/tiwen.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>体温：</span><span>36.5℃</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
          </div>
          <div class="item" style="cursor: pointer">
            <div>
              <img
                src="@/assets/img/maibo.png"
                style="width: 45px; height: 45px"
              />
            </div>
            <div style="margin-left: 10px">
              <span style="font-size: 18px"
                ><span>脉搏：</span><span>60次/分钟</span></span
              >
              <span
                style="
                  display: block;
                  font-size: 14px;
                  color: #888888;
                  margin-top: 6px;
                "
                >2023-10-31 10:10:20</span
              >
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 15px">
        <template #header>
          <div class="title_main">
            <span class="title"></span>
            <span class="note">睡眠信息</span>
            <span style="margin-left: 15px">
              <el-date-picker
                style="width: 110px"
                v-model="value1"
                type="date"
                placeholder="选择日期"
                size="small"
              />
            </span>
          </div>
        </template>
        <div>
          <el-row>
            <el-col :span="6">
              <div style="display: flex; padding: 10px 15px">
                <div>
                  <span>用户实时状态：</span
                  ><span
                    ><el-tag
                      class="ml-2"
                      type="success"
                      style="margin-left: 5px"
                      >在床</el-tag
                    ><el-tag
                      class="ml-2"
                      type="warning"
                      style="margin-left: 5px"
                      >离床</el-tag
                    ></span
                  >
                </div>
              </div>
              <div>
                <echarts_status></echarts_status>
              </div>
            </el-col>
            <el-col :span="18">
              <div>
                <echarts_par></echarts_par>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card style="margin-top: 15px">
        <template #header>
          <div class="title_main">
            <span class="title"></span>
            <span class="note">实时视频</span>
          </div>
        </template>
        <div>
          <el-row :gutter="30">
            <el-col :span="12">
              <div
                style="width: 100%; height: 400px; background: #1ab394"
              ></div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </el-scrollbar>

  <el-dialog
    v-model="open"
    title="即时报警"
    append-to-body
    width="900px"
    v-if="open"
    :close-on-click-modal="false"
  >
    <el-form :model="form">
      <el-form-item label="告警类型" prop="categoryId">
        <el-select
          v-model="form.categoryId"
          clearable
          placeholder="请选择告警类型"
          style="width: 150px"
        >
          <el-option
            v-for="dict in warnType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div>
      <el-table v-loading="loading" :data="postList" stripe border>
        <el-table-column label="告警时间" align="center" width="150" />
        <el-table-column label="告警信息" align="center" width="150" />
        <el-table-column label="告警终端" align="center" width="200" />
        <el-table-column label="告警地址" align="center" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="form.page"
        v-model:limit="form.limit"
        @pagination="getList"
      />
    </div>
  </el-dialog>

  <el-dialog
    v-model="open1"
    title="健康指标"
    append-to-body
    width="900px"
    v-if="open1"
    :close-on-click-modal="false"
  >
    <el-form :model="form1">
      <el-form-item label="指标名称" prop="categoryId">
        <el-select
          v-model="form1.categoryId"
          clearable
          placeholder="请选择指标名称"
          style="width: 150px"
        >
          <el-option
            v-for="dict in warnType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
        <el-radio-group
          v-model="tabData"
          size="small"
          style="margin-left: 20px"
        >
          <el-radio-button label="trend">查看趋势</el-radio-button>
          <el-radio-button label="data">数据详情</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div v-if="tabData == 'trend'">
      <div>33333333</div>
      <echarts_line></echarts_line>
    </div>
    <div v-if="tabData == 'data'">
      <el-table
        v-loading="loading"
        :data="postList"
        stripe
        border
        :row-class-name="rowClassName"
      >
        <el-table-column label="监测时间" align="center" width="150" />
        <el-table-column label="测量值" align="center" width="150" />
        <el-table-column label="测量结果" align="center" width="200" />
        <el-table-column label="测量地址" align="center" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="form.page"
        v-model:limit="form.limit"
        @pagination="getList"
      />
    </div>
  </el-dialog>
</template>
<script setup name="info">
import BatteryDisplay from "@/views/equipmentManagement/deviceRegistration/BatteryDisplay.vue";
import echarts_status from "@/views/equipmentManagement/info/echarts_status.vue";
import echarts_par from "@/views/equipmentManagement/info/echarts_par.vue";
import echarts_line from "@/views/equipmentManagement/info/line.vue";
const value1 = ref(null);
const open = ref(false);
const open1 = ref(false);
const warnType = ref([]);
const postList = ref([]);
const loading = ref(false);
const total = ref(0);
const tabData = ref("trend");
const data = reactive({
  form: {},
  form1: {},
});

const { form, form1 } = toRefs(data);

function getList() {}
function rowClassName({ row }) {
  console.log("22222222222222222222222222", row);
}
</script>
<style scoped lang="scss">
.scroll-container {
  max-height: 2000px; /* Set the maximum height for the scroll container */
}

.scroll-wrapper {
  height: 100%; /* Set the height of the scroll wrapper */
}
.info_container {
  padding: 20px;

  .title_main {
    display: flex;
    align-items: center;
    .title {
      width: 7px;
      height: 18px;
      line-height: 18px;
      background: #409eff;
      border-radius: 4px;
      display: inline-block;
    }
    .note {
      margin-left: 8px;
    }
  }
  .card_body {
    display: flex;
    .card_body1 {
      width: 15%;
      display: flex;
      align-items: center;
    }
    .card_body2 {
      width: 85%;
    }
  }
  .item {
    height: 50px;
    border-radius: 4px;
    width: 280px;
    height: 90px;
    margin-top: 10px;
    margin-right: 30px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    position: relative;
  }
  .dangers {
    border: 2px solid #ed5f5c;
    box-shadow: -2px 2px 10px 5px #ed5f5c;
  }

  //:deep(.tab) .el-radio-group{
  //  //.el-radio-button{
  //  //  border: 1px solid #1CDBFE;
  //  //
  //  //}
  //  margin-bottom: 0!important;
  //  .el-radio-button__inner{
  //    background:#FFFFFF;
  //    color: #409EFF;
  //    border: 1px solid #409EFF;
  //  }
  //  .is-active .el-radio-button__inner{
  //    background: #409EFF;
  //    color: #FFFFFF;
  //  }
  //}
}
</style>
<script setup></script>
